import { Grid, ButtonPrimary, ButtonDanger, Input, Button, vars, Radio, Check } from '../imports';
import { bar } from '../style.css';
import { genText } from '../utils';

export function GridPage() {
	let tb: Grid;
	let fixColumnInput: HTMLInputElement;

	function addColumns() {
		tb.setColumns([
			{ title: '列1', key: 0, align: 'center', sortable: true, width: '200px', resizable: true },
			{ title: '列2', key: 1, sortable: true, width: '10%', resizable: true },
			{ title: '列3', key: 2, align: 'right', width: '10%', resizable: true },
			{ title: '列4', key: 3, width: '10%' },
			{ title: '列5', key: 4, width: '10%' },
			{ title: '列6', key: 4, width: '15%', resizable: true },
			{ title: '列7', key: 4, width: '15%', resizable: true },
		]);
	}

	function addData() {
		const result = [];
		let sum = 0;
		for (let i = 1; i <= 100000; i++) {
			sum += i;
			const row = [];
			row.push(i + '');
			row.push(genText());
			for (let j = 1; j < 4; j++) {
				row.push('text content ' + j);
			}
			result.push(row);
			if (i % 100 === 0) {
				result.push({ section: '合计：' + sum });
			}
		}
		console.log('data generated!');
		tb.setRows(result);
	}

	return (
		<>
			<h2>数据网格（数据超过100行以上的建议使用此控件）</h2>
			<div class={bar}>
				<ButtonPrimary onClick={addColumns}>添加表头</ButtonPrimary>
				<ButtonDanger onClick={() => tb.setColumns([])}>删除表头</ButtonDanger>
				<ButtonPrimary onClick={addData}>添加数据（10万行）</ButtonPrimary>
				<ButtonDanger onClick={() => tb.setRows([])}>删除数据</ButtonDanger>
				<span style={{ margin: '0 1rem' }}> | </span>
				<Input placeholder="固定列" type="number" style={{ width: '10rem' }} ref={(i) => (fixColumnInput = i)} />
				<Button onClick={() => tb.setFixColumns(parseInt(fixColumnInput.value || '0'))}>设置固定列</Button>
			</div>
			<div class={bar}>
				<span style={{ color: vars.color.accent }}>排序：</span>
				<label>
					<Radio name="grid-sort" checked onClick={() => tb.setSortType('none')} /> 无
				</label>
				<label>
					<Radio name="grid-sort" onClick={() => tb.setSortType('simple')} /> 简单
				</label>
				<label>
					<Radio name="grid-sort" onClick={() => tb.setSortType('combine')} /> 组合
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<span style={{ color: vars.color.accent }}>列宽：</span>
				<label>
					<Radio name="grid-size" checked onClick={() => tb.setColumnSize('auto')} /> 自适应
				</label>
				<label>
					<Radio name="grid-size" onClick={() => tb.setColumnSize('scale')} /> 按比例分配
				</label>
				<label>
					<Radio name="grid-size" onClick={() => tb.setColumnSize('fixed')} /> 绝对值
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						text=""
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.el.style.height = '800px';
								} else {
									tb.el.style.height = '';
								}
							});
						}}
					/>
					表格固定高度
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setColumnBorder(true);
								} else {
									tb.setColumnBorder(false);
								}
							});
						}}
					/>
					始终显示列边框
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setHeadLine(true);
								} else {
									tb.setHeadLine(false);
								}
							});
						}}
					/>
					显示表头
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setSelectable(true);
								} else {
									tb.setSelectable(false);
								}
							});
						}}
					/>
					复选框
				</label>
				<span style={{ margin: '0 1rem' }}> | </span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setActivable(true);
								} else {
									tb.setActivable(false);
								}
							});
						}}
					/>
					行选择
				</label>
			</div>
			<Grid section={{ key: 'section' }} ref={(t) => (tb = t)} onRowClick={(detail) => console.log(detail)} />
		</>
	);
}
